<template >
  <div style="position: relative;width: 280px;"  v-loading="loading">
    <div style="width: 300px;margin-left: 33px;margin-bottom: 20px">
      <el-button type="primary"  @click="createGroup">创建分组</el-button>
      <el-button type="primary"  style="margin-left: 10px;" @click="resetQuery">重置查询</el-button>
    </div>
    <el-aside class="showData"   >
      <div style="height: 40px">
        <el-input
          size="small" placeholder="请输入关键词搜索"
          suffix-icon="el-icon-search"
          v-model="queryParams.groupTitle"
          clearable @keyup.enter.native="handleQuery"
          @clear="handleclear">
        </el-input>
      </div>

      <div  @click="clickGroup(item)"  v-for="(item,index) in groupDataList" :key="index" >
        <div :class="checkedId === item.id ?  'checkAccount' : 'accountSty'" :style="checkedId === item.id ? 'position: relative' : ''" >
          <div style="display: flex;flex-direction: column;">
            <div style="font-size: 15px;margin-left: 20px;line-height: 50px;display: flex;">
              {{item.groupTitle && item.groupTitle.length > 6 ? item.groupTitle.substr(0,6) + '...' : item.groupTitle }}
              <div v-if="checkedId === item.id" style="display: flex;flex-direction: column;position: absolute;right: 10px;top: 16%">
                <i class="el-icon-edit" @click="editGroup(item)"></i>
                <i class="el-icon-delete" @click="delGroup(item)" style="margin-top: 5px"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div  style="margin-top: 100px" v-if="groupDataList.length < 1">
        <el-empty  description="暂无账号数据"></el-empty>
      </div>

    </el-aside>
    <div style="position:absolute;left: 46%;top: 95%">
      <pagination
        v-show="total>0"
        :total="total"
        small
        layout="prev, pager, next"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog :title="title" :visible.sync="showCreateGroup"  width="500px" append-to-body>
          <el-form :model="form"  ref="queryForm" size="small" @submit.native.prevent :inline="true"  label-width="120px">
            <el-form-item label="分组名称" style="margin-top: 30px;margin-bottom: 30px" prop="nickname">
              <el-input
                v-model="form.groupTitle"
                placeholder="请输入分组名称"
                clearable
                @keyup.enter.native="createNewGroup"
              />
            </el-form-item>
          </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="createNewGroup">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import { listAccountGroupData,addAccountGroup,delAccountGroup,updateAccountGroup } from "@/api/media/accountGroup";
import {Message} from "element-ui";
export default {
  name: "groupSelect",
  data() {
    return {
      buttonLoading:false,
      showCreateGroup:false,
      checkedId:'',
      form:{},
      title:'创建分组',
      // 总条数
      total: 0,
      loading:false,
      //选择账号分组
      groupDataList:{},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        groupTitle:undefined
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询账号分组列表 */
    getList() {
      this.loading = true;
      listAccountGroupData(this.queryParams).then(response => {
        this.groupDataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },


    /**
     * 创建分组打开分组弹框
     */
    createGroup(){
      this.showCreateGroup = true
    },


    /**
     * 编辑分组
     */
    editGroup(item){
      this.title = "修改分组"
      this.showCreateGroup = true
      this.form = item
    },

    /**
     * 删除分组
     */
    delGroup(item){
      console.log()
      let tips = "是否删除该分组？";
      this.$modal.confirm(tips).then(() => {
        this.loading = true;
        return delAccountGroup(item.id);
      }).then(() => {
        this.loading = false;
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.getList();
        this.loading = false;
      });
    },



    /**
     * 重置刷新
     */
    resetQuery(){
      this.checkedId = ''
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        groupTitle: undefined
      }
      this.getList()
      this.$emit("reloadData")
    },

    /**
     * 清空搜索框
     */
    handleclear(){
      this.getList()
    },


    /**
     * 提交分组数据
     */
  async createNewGroup(){
      if(!this.form.groupTitle){
        Message.error("分组名称不能为空！")
        return;
      }
      if(this.form.id){
       updateAccountGroup(this.form).then((res)=>{
        Message.success("修改成功！")
        this.showCreateGroup = false
        this.getList()
        })
      }else{
        addAccountGroup(this.form).then((res)=>{
          Message.success("创建成功！")
          this.showCreateGroup = false
          this.getList()
        })
      }

    },

    cancel(){
      this.showCreateGroup = false
    },


    /**
     * 选中当前分组
     * @param item
     */
    clickGroup(item){
      this.checkedId = item.id
        this.$emit("getGroupData",item)
    },


    /** 搜索按钮操作 */
    handleQuery() {
      // this.queryParams.groupTitle = ;
      this.getList();
    },


  }
};
</script>
<style  >

.showData{
  position: relative;
  width: 230px !important;
  height: 590px !important;
  background: #fafafa;
  border-radius: 5px;
  margin-left: 20px
}

.accountSty{
  display: flex;
  position: relative;
  background: #ffffff;
  border-radius: 6px;
  height: 50px;
  margin-top: 10px;
  cursor: pointer;
}

.checkAccount{
  display: flex;
  position: relative;
  background: #d9e3ee;
  border-radius: 6px;
  height: 50px;
  margin-top: 10px;
  cursor: pointer;
}


.el-icon-edit:hover{
  color: #73a3d7;
}

.el-icon-delete:hover{
  color: #cc4253;
}

.accountSty:hover{
  background: #d9e3ee;
}
</style>
